<template>
  <div class="count">
    <h2>当前的和:{{ sum }}</h2>
    <h2>当前学校:{{ school }}</h2>
    <h2>当前地址:{{ address }}</h2>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="main">-</button>
    <button @click="add">+</button>
    <button @click="Odd">当前和为期数+</button>
    <button @click="waitAdd">等一等+</button>
    <button @click="serverAdd">提交</button>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  name: "Count",
  data() {
    return {
      n: 1,
    };
  },
  computed:{
    ...mapState(['sum','school','address'])
  },
  methods: {
    main() {
      this.$store.dispatch("jian", this.n);
    },
    add() {
      this.$store.dispatch("jia", this.n);
    },
    Odd() {
      this.$store.dispatch("jishuzaijia", this.n);
    },
    waitAdd() {
      this.$store.dispatch("dengyihui", this.n);
    },
    serverAdd() {
      this.$store.dispatch("fuwuJia");
    },
  },
};
</script>

<style scoped>
button {
  margin-left: 10px;
}
.count {
  text-align: center;
}
</style>